<template>
    <div>
        <div id="product-search " class="container" >
            <div class="row">
                <div id="content" class="col-sm-12">
                    <div class="nav-bar">搜索</div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div id="search" class="input-group">
                                <input v-model='search_key' type="text" name="search" placeholder="关键字" id="input-search" class="form-control">
                                <input type="hidden" name="category_id" value="0">
                                <input type="hidden" name="sub_category" value="1">
                                <input type="hidden" name="description" value="1">
                                <span class="input-group-btn">
                                    <a v-on:click="search()" id="button-search" class="btn btn-primary">搜索</a>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="row widget category-sort-widget hide">
                        <div class="col-sm-12">
                            <ul>
                                <li>
                                    <a class="active" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.sort_order&amp;order=ASC&amp;search=s">
                                        默认 <i class="fa fa-level-down"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=pd.name&amp;order=ASC&amp;search=s">
                                        名称 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.price&amp;order=ASC&amp;search=s">
                                        价格 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=rating&amp;order=DESC&amp;search=s">
                                        评级 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.model&amp;order=ASC&amp;search=s">
                                        型号 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div  class="row product-list-item-style product-grid-box">
                        <div v-for='item in goods_list' class="col-xs-6 product-item">
                            <div class="product-item-wrapper">
                                <div class="image">
                                    <a v-bind:href="'#/goods/'+ item.id">
                                        <img v-bind:data-src="item.image"
                                             v-bind:src="item.image"
                                             class="lazy img-responsive" style="opacity: 1;">
                                    </a>
                                    <!--<span class="sales">销量： 100,039</span>-->

                                </div>
                                <div class="info">
                                    <a v-bind:href="'#/goods/'+ item.id" >
                                        {{item.name}}
                                    </a>
                                    <div class="price">
                                        <span class="price-new">￥{{item.price}}</span>
                                        <!--<span class="price-old">￥788.00</span>-->
                                    </div>

                                    <div class="add-cart" v-on:click="cart_add(item)">
                                        <i class="iconfont"></i>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>



                </div>
            </div>
        </div>
        <footer-nav></footer-nav>




    </div>

</template>

<script>

    import nav from './common/nav';
    export default {

        data: function(){
            return {
                category    : 0,    // category_path_id
                search_key  : '',
                goods_list  : [],
                // tips        : {     // 提示框
                //     show: 0,
                //     message: ''
                // }
            }
        },
        methods:{

            header2_event:function( data ){

                console.log( 'header2_event:' );
                console.log( data );
            },

            get_header:function(){

            },
            get_list:function(){

                var t = this;
                var url = this.config.app_url + '&r=goods.index';
                url += "&key=" + this.search_key;
                url += "&category=" + this.category;
                this.axios.get( url )
                    .then(function (res) {
                        t.goods_list = res.data;
                        console.log( t.goods_list );
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            search:function(  ){

                this.get_list();
            },

            cart_add:function( product ){

                // 暂时屏蔽购物车功能， 添加规格以后
                location.href='#/goods/' + product.id;
                return;

                //todo 添加到购物车
                var t = this;
                var url = this.config.app_url + '&r=cart.add';
                url += '&product_id='+product.id+'&number=1';
                this.axios.get( url )
                    .then(function (res) {

                        if( res.data.description ){
                            //todo 显示 购物车添加提示
                            // t.tips.message = res.data.description;
                            // t.tips.show = 1;
                            var tips_data = {
                                show:1,
                                message:res.data.description
                            };

                            t.bus.$emit('tips',tips_data);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }

        },

        // watch:{
        //     'tips.show':function(){
        //         console.log('tips show');
        //         //todo: 提示框定位: 获取屏幕宽度，获取自身宽度， 算出left
        //
        //         // todo:提示框缓缓消失
        //
        //     }
        // },
        created:function(){

            if( this.$route.params && this.$route.params.path_id ){

                this.category = this.$route.params.path_id;

            }

            this.get_list();

        },


        components:{

            'footer-nav':nav
        }
    }
</script>

<style scoped>

</style>